<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="title"
  [loading]="isLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <div class="columns">
        <div class="column">
          <ix-fieldset [title]="'Dataset' | translate">
            <ix-select
              formControlName="dataset"
              [label]="labels.dataset | translate"
              [required]="true"
              [options]="datasetOptions$"
            ></ix-select>

            <ix-chips
              formControlName="exclude"
              [label]="labels.exclude | translate"
              [placeholder]="labels.exclude | translate"
              [tooltip]="tooltips.exclude | translate"
            ></ix-chips>

            <ix-checkbox
              formControlName="recursive"
              [label]="labels.recursive | translate"
              [tooltip]="tooltips.recursive | translate"
            ></ix-checkbox>
          </ix-fieldset>
        </div>
        <div class="column">
          <ix-fieldset [title]="'Schedule' | translate">
            <div class="input-group">
              <ix-input
                formControlName="lifetime_value"
                type="number"
                [label]="labels.lifetime | translate"
                [tooltip]="tooltips.lifetime | translate"
                [required]="true"
              ></ix-input>

              <ix-select
                formControlName="lifetime_unit"
                [label]="'Unit' | translate"
                [options]="lifetimeOptions$"
                [required]="true"
              ></ix-select>
            </div>
            <ix-input
              formControlName="naming_schema"
              [label]="labels.naming_schema | translate"
              [tooltip]="tooltips.naming_schema | translate"
            ></ix-input>

            <ix-scheduler
              formControlName="schedule"
              [label]="labels.schedule | translate"
              [tooltip]="tooltips.schedule | translate"
              [required]="true"
            ></ix-scheduler>

            @if (isTimeMode) {
              <ix-select
                formControlName="begin"
                [label]="labels.begin | translate"
                [tooltip]="tooltips.begin | translate"
                [required]="true"
                [options]="timeOptions$"
              ></ix-select>
            }

            @if (isTimeMode) {
              <ix-select
                formControlName="end"
                [label]="labels.end | translate"
                [tooltip]="tooltips.end | translate"
                [required]="true"
                [options]="timeOptions$"
              ></ix-select>
            }

            <ix-checkbox
              formControlName="allow_empty"
              [label]="labels.allow_empty | translate"
              [tooltip]="tooltips.allow_empty | translate"
            ></ix-checkbox>

            <ix-checkbox
              formControlName="enabled"
              [label]="labels.enabled | translate"
            ></ix-checkbox>
          </ix-fieldset>
        </div>
      </div>

      <div class="form-actions">
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </form>
  </mat-card-content>
</mat-card>
